import React, {forwardRef, useImperativeHandle, useState} from 'react';
import {Modal, View, StyleSheet, TouchableOpacity} from 'react-native';
import MyList from './MyList';
import OtherList from './OtherList';
import HomeStore from '../../../../stores/HomeStore';
export interface CategoryModalRed {
  show: () => void;
  hide: () => void;
}
type PropsType = {};
const CategoryModal: React.ForwardRefExoticComponent<
  PropsType & React.RefAttributes<CategoryModalRed>
> = forwardRef<CategoryModalRed, PropsType>((props: PropsType, ref) => {
  const [visible, setVisible] = useState<boolean>(false);
  const show = () => {
    setVisible(true);
  };
  const hide = () => {
    setVisible(false);
    if (HomeStore.edit) {
      HomeStore.setEdit(false);
    }
  };

  useImperativeHandle(ref, () => {
    return {
      show,
      hide,
    };
  });
  return (
    <Modal
      transparent={true}
      visible={visible}
      animationType="fade"
      onRequestClose={hide}>
      <View style={styles.root}>
        <View style={styles.top} />
        <View style={styles.content}>
          <MyList hide={hide} />
          <OtherList />
        </View>
        <TouchableOpacity style={styles.mask} onPress={hide} />
      </View>
    </Modal>
  );
});

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    flexDirection: 'column',
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  },

  top: {
    width: '100%',
    height: 42,
    backgroundColor: 'transparent',
  },
  content: {
    width: '100%',
    backgroundColor: 'white',
    paddingTop: 10,
    paddingBottom: 40,
  },
  mask: {
    width: '100%',
    flex: 1,
    backgroundColor: '#00000060',
  },
});
export default CategoryModal;
